<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-25 21:42:34
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-29 22:47:10
 * @Description: 
-->
<template>
  <div>
    <div class="topsets">
      <div class="btns">
        <div class="daysbtn" @click.stop="search(7)">Last 7 days</div>
        <div class="daysbtn" @click.stop="search(30)">Last 30 days</div>
        <div class="daysbtn" @click.stop="search(0)">All</div>
      </div>
      <div class="selects">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD"
          :placeholder="['Start Time', 'End Time']"
          @change="onChange"
        />
        <div class="kol-btn kol-btn-primary" @click.stop="searchSub">Submit</div>
        <div class="kol-btn kol-btn-primary" @click.stop="reset">Reset</div>
      </div>
    </div>
    <div class="tables">
      <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Dayjs } from 'dayjs';
import { reactive, toRefs, onBeforeMount, onMounted, ref, defineProps, watch } from 'vue'
import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getbankcardlst, getIncomelist, getWallet, withdrawList } from '../../../api/wallet';
import { getStorageItem, setStorageItem } from '../../../utils/utils';
import { ICarditem } from '../../types';
interface DataProps { }

const store = useStore()

watch(
  () => store.state.user.withdrawstatus,
  async (newval, old) => {
    if (newval) {
      const param = {
        pageSize: pageSize,
        pageNumber: page.value
      }
      await getDataSouce(param)
      store.dispatch('user/updateHaswithdraw', false)
    }
  }
)

const startTime = ref('')
const endTime = ref('')
// 时间段选择插件
const onChange = (value: Dayjs[], dateString: string[]) => {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
  startTime.value = dateString[0]
  endTime.value = dateString[1]
}

// 表格相关
const dataSource = ref<any[]>([])
const page = ref(1)
const pageSize = 40

const columns = [
  {
    title: 'Withdrawal ID',
    dataIndex: 'sn',
    key: 'sn',
  },
  {
    title: 'Withdrawal Amount',
    dataIndex: 'applyMoney',
    key: 'applyMoney',
  },
  {
    title: 'Status',
    dataIndex: 'applyStatus',
    key: 'applyStatus',
  },
  {
    title: 'Apply Time',
    dataIndex: 'inspectTime',
    key: 'inspectTime',
  },
]


const pagination = {
  current: page.value,
  defaultPageSize: pageSize
}

// 获取收入数据
const getDataSouce = async (param: { pageSize: number; pageNumber: number; searchType?: string; startTime?: string; endTime?: string; }) => {
  const res = await withdrawList(param)
  if (res) {
    dataSource.value = res.result.records
  }
}



onMounted(() => {
  const param = {
    pageSize: pageSize,
    pageNumber: page.value
  }
  getDataSouce(param)
})


const searchType = ref('')

// 简便搜索
const search = (num: number) => {
  if (num === 7) {
    searchType.value = 'LAST_SEVEN'
    const param = {
      searchType: searchType.value,
      pageSize: pageSize,
      pageNumber: page.value
    }
    getDataSouce(param)
  } else if (num === 30) {
    searchType.value = 'LAST_THIRTY'
    const param = {
      searchType: searchType.value,
      pageSize: pageSize,
      pageNumber: page.value
    }
    getDataSouce(param)
  } else {
    searchType.value = 'ALL'
    const param = {
      searchType: searchType.value,
      pageSize: pageSize,
      pageNumber: page.value
    }
    getDataSouce(param)
  }
}

const searchSub = () => {
  const param = {
    pageSize: pageSize,
    pageNumber: page.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getDataSouce(param)
}

const reset = () => {
  page.value = 1
  startTime.value = ''
  endTime.value = ''
  searchType.value = ''
  const param = {
    pageSize: pageSize,
    pageNumber: page.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getDataSouce(param)
}
</script>
<style lang='scss'>
.income {
  width: 1600px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
